<template>
  <div class="zw-index">
    <div class="zw-search">
      <van-search @focus="$router.push('/home')" placeholder="搜索课程/文章" />
    </div>
    <div class="zw-sidebar">
      <ul class="zw_sidebar-ul">
        <li
          class="zw-sidebar-ul-li"
          v-for="item in type"
          :key="item._id"
          @click="handleTypeClick(item)"
          :class="{ active: item._id === currentTypeId }"
        >
          {{ item.title }}
        </li>
      </ul>
    </div>
    <div class="zw-content">
      <p>平面设计</p>
      <ul>
        <button
          @click="router.push('/plane')"
          class="zw-button"
          v-for="item in article"
          :key="item._id"
        >
          {{ item.title }}
        </button>
      </ul>
    </div>
  </div>
</template>
//后端联系表嘛
<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { getSeder, getCon } from "@/api/index.js";
const router = useRouter();
const type = ref([]);
const article = ref([]);
const currentTypeId = ref("66013c4264cae5f1353ed524");
const { data } = await getSeder();
type.value = data;
const res = await getCon(currentTypeId.value);
article.value = res.data;
currentTypeId.value = type.value[0]._id;
const handleTypeClick = async (item) => {
  currentTypeId.value = item._id;
  getCon(currentTypeId.value);
  const res = await getCon(currentTypeId.value);
  article.value = res.data;
};
</script>
<style lang="scss" scoped>
.zw-index {
  width: 100%;
  height: 100%;

  .zw-search {
    width: 85%;
  }

  .zw-sidebar {
    width: 160px;
    float: left;
    background-color: #f5f4f4;
    height: 90vh;
  }

  .zw-sidebar-ul-li {
    width: 80%;
    height: 40px;
    font-size: 17px;
    margin: 10px 15px;
    line-height: 40px;
    text-align: center;
  }

  .active {
    background-color: rgba(102, 110, 232, 1);
    color: white;
    border-radius: 5px;
  }

  .zw-content {
    margin: 10px 15px;
  }

  .zw-content p {
    font-size: 20px;
    font-weight: bold;
    color: #999999;
    margin-left: 156px;
  }

  .zw-button {
    width: 80px;
    height: 35px;
    line-height: 35px;
    font-size: 15px;
    padding: 3px;
    margin: 10px;
    border: none;
    border-radius: 15px;
    text-align: center;
    background-color: rgb(248, 247, 247);
  }
}
</style>
